<template>
  <div class="main_box" style="padding:10px">
    <div class="add_wrap">
      <el-form label-width="200px" v-if="dataInfo">
        <div class="tit">
          <h2>基础信息</h2>
          <el-button
            type="success"
            plain
            size="small"
            icon="fa fa-mail-forward"
            @click="returnList"
            >返回</el-button
          >
        </div>
        <el-row>
          <el-form-item label="产品组合图片:">
            <div class="img-wrapper">
              <el-image
                title="点击可预览"
                v-if="dataInfo.mainImg"
                :src="dataInfo.mainImg"
                alt=""
                :preview-src-list="[dataInfo.mainImg]"
              ></el-image>
            </div>
          </el-form-item>
          <el-form-item label="产品组合名称:">
            <span>{{ dataInfo.combineName }}</span>
          </el-form-item>
          <el-form-item label="所属小区:">
            <span>{{ dataInfo.villageName }}</span>
          </el-form-item>
          <el-form-item label="产品组合类型:">
            <span>{{ formatCombineType(dataInfo.combineType) }}</span>
          </el-form-item>
          <el-form-item label="报警类型:">
            <span>{{ $Filters.formatAlarmType(dataInfo.alarmType) }}</span>
          </el-form-item>
          <!-- <el-form-item label="安全设备类型:" v-if="dataInfo.combineType == 2">
            <span>{{ formatSafetyType(dataInfo.safetyType) }}</span>
          </el-form-item> -->

          <el-form-item label="是否默认:">
            <span v-if="dataInfo.defaultFlag">是</span>
            <span v-if="!dataInfo.defaultFlag">否</span>
          </el-form-item>
          <el-form-item label="产品组合描述:">
            <span>{{ dataInfo.combineDesc }}</span>
          </el-form-item>
          <el-form-item label="在售状态:">
            <span>{{ formatSaleState(dataInfo.saleState) }}</span>
          </el-form-item>
          <el-form-item label="备注:">
            <span>{{ dataInfo.remark }}</span>
          </el-form-item>
          <el-form-item label="创建人:">
            <span>{{ dataInfo.createUserName }}</span>
          </el-form-item>
          <el-form-item label="创建时间:">
            <span>{{ dataInfo.createDate }}</span>
          </el-form-item>
          <el-form-item label="修改人:">
            <span>{{ dataInfo.modifyUserName }}</span>
          </el-form-item>
          <el-form-item label="修改时间:">
            <span>{{ dataInfo.modifyDate }}</span>
          </el-form-item>
        </el-row>

        <div class="tit">
          <h2>关联产品信息</h2>
        </div>
        <el-row>
          <el-table :data="dataInfo.goodsList" border>
            <el-table-column
              type="index"
              label="序号"
              align="center"
              width="50"
            >
            </el-table-column>
            <el-table-column
              prop="goodsCode"
              label="产品编号"
              align="center"
              width="120"
            >
            </el-table-column>
            <el-table-column label="产品图片" align="center" width="100">
              <template slot-scope="scope">
                <div class="img-wrapper">
                  <el-image
                    :src="scope.row.images"
                    alt=""
                    :preview-src-list="[scope.row.images]"
                  ></el-image>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="name"
              label="产品名称"
              align="center"
              width="170"
            >
            </el-table-column>
            <el-table-column
              prop="describes"
              label="产品描述"
              align="center"
              width="170"
            >
            </el-table-column>
            <el-table-column label="产品分类" align="center" width="130">
              <template slot-scope="scope">
                {{ scope.row.serverClassifyName }}-{{
                  scope.row.thirdClassifyName
                }}
              </template>
            </el-table-column>
            <el-table-column
              prop="businessName"
              label="商户名称"
              align="center"
            >
            </el-table-column>
            <!--<el-table-column prop="price" label="原价" align="center" width="50">
            </el-table-column>
            <el-table-column prop="salePrice" label="售价" align="center" width="50">
            </el-table-column>-->
          </el-table>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import CombineApi from "@/api/goods/combine";

export default {
  data() {
    return {
      dataInfo: {}
    };
  },
  computed: {},
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      CombineApi.getCombineInfo({ id: this.$route.query.id }).then(res => {
        this.dataInfo = res.data;
      });
    },
    formatCombineType(cellValue) {
      if (cellValue === 1) {
        return "常规";
      } else if (cellValue === 2) {
        return "安全报警";
      }
    },
    formatSaleState(cellValue) {
      if (cellValue === 1) {
        return "待上架";
      } else if (cellValue === 2) {
        return "上架";
      } else if (cellValue === 3) {
        return "下架";
      } else if (cellValue === 4) {
        return "当日售罄";
      }
    },
    returnList() {
      this.$store.dispatch("delView", this.$route);
      this.$router.push({ path: "/goods/combineManagement" });
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/assets/css/views/add.scss";
</style>

<style lang="scss" scoped>
.img-wrapper {
  width: 100%;
  overflow: hidden;
  border-radius: 3px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 0 auto;

  .el-image {
    width: 100%;
    &::v-deep img {
      height: auto;
    }
  }
}
</style>
